<template>
  <view class="message-block-container" @click="handleGoDetail">
    <view class="icon">
      <image :src="message.icon"></image>
    </view>
    <view class="info">
      <view class="info-left">
        <text class="title">{{message.title}}</text>
        <text class="desc">{{message.msg}}</text>
      </view>
      <view class="info-right">
        <view class="badge" v-if="message.unreadNum>0">
          <text>{{message.unreadNum}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "message-block",
    props: {
      data: {
        default: () => {
          return null
        },
        type: Object
      }
    },
    data() {
      return {};
    },
    methods: {
      handleGoDetail() {
        uni.navigateTo({
          url: '/pages/message/message-details/message-details?type=' + this.data.type
        })
      }
    },
    computed: {
      message() {
        let type = this.data && this.data.type ? this.data.type : 0;
        return {
          title: getApp().globalData.message_config[type].configValue,
          icon: getApp().globalData.message_config[type].imageLink,
          msg: this.data.msg,
          unreadNum: this.data.unreadNum
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .message-block-container {
    width: 100%;
    display: flex;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    align-items: center;
    background-color: #fff;
    padding-right: 0;

    .icon {
      width: 88rpx;

      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
    }

    .info {
      display: flex;
      width: calc(100% - 112rpx);
      margin-left: 24rpx;
      height: 88rpx;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #E8EBED;

      .info-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // padding: 0 16rpx;
        box-sizing: border-box;
        width: calc(100% - 120rpx);
        height: 88rpx;

        .title {
          font-family: PingFang SC Regular;
          font-size: 32rpx;
          font-weight: normal;
          line-height: 44rpx;
          letter-spacing: -0.3px;
          /* 黑 */
          color: #333333;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .desc {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          font-weight: normal;
          line-height: 34rpx;
          letter-spacing: -0.3px;
          /* 灰 */
          color: #545454;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .info-right {
        width: 120rpx;
        height: 88rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .badge {
          border-radius: 100rpx;
          background-color: #F75454;
          padding: 0rpx 16rpx;
          box-sizing: border-box;
          height: 36rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          text {
            color: #fff;
            font-size: 24rpx;
            font-weight: normal;
            letter-spacing: 0em;
            line-height: 24rpx;
          }
        }
      }

    }
  }
</style>
